<template>
  <div class="container login">
    <!-- <van-nav-bar
      title="账单核算积分申请"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <div class="login-com">
    <div>
      <van-cell-group>
        <van-field
          label="账单金额"
          placeholder="请输入账单金额(小数点后两位)"
          v-model="Amount"
          required
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label">
            <span>上传账单</span>
            </div>
            <div class="van-cell__value">
              <div class="van-field__body">
                 <van-uploader :after-read="afterRead" v-model="files" :max-count="1" />
                </div>
                </div>
              </div>
      </van-cell-group>
      <div class="login-btn-row">
        <van-button type="danger" class="login-btn" :disabled="isdisabled" @click="applyIntegral">立即申请</van-button>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import baaseUrl from '../../until/base'
export default {
  name: 'applyIntrgral',
  data() {
    return {
      Amount:'',
      FileUrl:'',
      files:[],
      isdisabled:true
    }
  },
  methods: {    
    applyIntegral() {  
      if(this.Amount == ''){
        this.$toast('请输入账单金额')
        return false;
      }else{
        let myreg=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;  
        if (!myreg.test(this.Amount)) {  
            this.$toast('账单金额格式不正确');
            return false;
        }
      }
      this.$api.mine.applyIntegral({        
          FileUrl:this.FileUrl,
          Amount:this.Amount   
      }).then(res=> {
        if(res.IsSuccess){
          this.$toast.success('提交成功');
          setTimeout(()=>{
            this.$router.go(-1);
          },2000)
        }
      })    
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    afterRead(file) {
      this.$toast('正在上传...');
      let content = file.file
      let params = new FormData(); //创建form对象
      params.append("file", content);
      let base = ''
      if (process.env.NODE_ENV == 'development') {    
          base = baaseUrl.devUrl;
      } else if (process.env.NODE_ENV == 'debug') {    
          base = '';
      } else if (process.env.NODE_ENV == 'production') {    
          base = baaseUrl.proUrl;
      }
      let url = base +'/api/common/uploadImages';
      const instance=axios.create({
          withCredentials: true,
          headers: {
            'Content-Type': 'multipart/form-data',
            'authorization': localStorage.getItem("authorization") || '',
          }
         }) 
      instance.post(url,params)
        .then(res => {
          if(res.status == 200){
            this.$toast('上传成功');
            this.FileUrl = res.data;
            this.isdisabled = false;
          }
        }, err => {
          console.log(err)
          // Toast('上传失败，图片是否过大?')
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.login {
  .login-com {
    padding: .533333rem 0;
  }
  .user-pic-row {
    margin-top: 1.6rem;
    padding-bottom: 1.066667rem;
    text-align: center;
  }
  .user-pic {
    border-radius: 50%;
    height: 2.133333rem;
    width: 2.133333rem;
  }
  .login-btn-row {
    text-align: center;
    .login-btn {
      width: 90%;
      margin-top: .833333rem;
      border-radius: .106667rem;
    }
  }
  .red{
    color:red;
  }
}
</style>